<template>
	<view class="container">
		<!-- 驾校标题，动态渲染 -->
		<view class="title">{{ schoolInfo.title }}</view>
		<!-- 驾校介绍文本，动态渲染 -->
		<view class="desc" v-html="schoolInfo.desc"></view>
		<!-- 二维码区域，动态遍历渲染 -->
		<view class="qrcode-box">
			<view class="qrcode-item" v-for="(qrcode, index) in schoolInfo.qrcodes" :key="index">
				<image class="qrcode-img" :src="qrcode.url"></image>
				<text class="qrcode-desc">{{ qrcode.desc }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'

	// 定义响应式数据
	const schoolInfo = ref({
		title: '起航驾校',
		desc: '起航驾校是一所具有国家资质的汽车驾驶员培训学校，是一所值得信任的老牌驾校。<br/><br/>' +
			'起航驾校建有规范的训练场地及配有齐全的现代化教学设备、设施；拥有一支廉洁自律、严谨执教、驾培经验丰富的师资队伍，历年来为社会精心培养了大批合格的机动车驾驶人才。<br/><br/>' +
			'起航驾校将服务融入教学，让学员充分体会到“高效、高速、高质”给大家学习驾车带来的便捷，力争让学员感受到亲人般的温暖和亦师亦友的感动',
		qrcodes: [{
				url: '/static/images/wechat1.png',
				desc: '详情添加二维码了解'
			},
			{
				url: '/static/images/wechat2.png',
				desc: '付款码'
			}
		]
	});

	onLoad(() => {
		// 从本地存储获取详情数据
		try {
			const detailData = uni.getStorageSync('schoolDetail');
			if (detailData) {
				schoolInfo.value = detailData;
			} else {
				console.error('未找到学校详情数据');
			}
		} catch (error) {
			console.error('读取本地存储失败:', error);
		}
	});

	onShow(() => {
		// 同样在页面显示时尝试读取数据
		try {
			const detailData = uni.getStorageSync('schoolDetail');
			if (detailData) {
				schoolInfo.value = detailData;
			}
		} catch (error) {
			console.error('读取本地存储失败:', error);
		}
	});
</script>

<style scoped>
	.container {
		padding: 16px;
		background-color: #fff;
	}

	.title {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 12px;
	}

	.desc {
		font-size: 14px;
		color: #666;
		line-height: 1.6;
		margin-bottom: 16px;
		white-space: pre-line;
	}

	.qrcode-box {
		display: flex;
		justify-content: space-around;
		margin-top: 20px;
	}

	.qrcode-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.qrcode-img {
		width: 120px;
		height: 120px;
		margin-bottom: 8px;
	}

	.qrcode-desc {
		font-size: 14px;
		color: #666;
		text-align: center;
	}
</style>